<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加商品</title>
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>
<body>
<form class="form-horizontal">
  <div class="form-group" style="padding-top: 10px">
    <label for="inputTitle" class="col-sm-2 control-label">商品标题</label>
    <div class="col-sm-10">
      <input type="text" style="width: 80%" class="form-control" id="inputTitle" placeholder="请输入商品标题">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPrice" class="col-sm-2 control-label">商品价格</label>
    <div class="col-sm-10">
      <input type="text" style="width: 80%" class="form-control" id="inputPrice" placeholder="请输入商品价格">
    </div>
  </div>
  <div class="form-group">
    <label for="inputDescr" class="col-sm-2 control-label">商品描述</label>
    <div class="col-sm-10">
      <textarea cols="90" rows="5" class="form-control" id="inputDescr" placeholder="请输入商品描述"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label for="file" class="col-sm-2 control-label">商品图片</label>
    <div class="col-sm-10">
      <input type="file" class="form-control" id="file" onchange="uploadImg()">
      <br>
      <img src="" id="myimg" style="width: 100px; display: none;">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" class="btn btn-primary" onclick="addGood()">保存商品</button>
    </div>
  </div>
</form>

<script>
  // OSS 上传图片
  function uploadImg () {
    const client = new OSS({
      region: "oss-cn-hangzhou",
      accessKeyId: "LTAI5tG3eQXyx5mGWETMs3sq",
      accessKeySecret: "FvvU3Zrg2tFnbqi3ICRyppKwgqAr9X",
      bucket: "13group"
    });

    const fileInput = document.getElementById("file");
    const fileObj = fileInput.files[0];

    if (!fileObj) {
      alert("请选择要上传的图片");
      return;
    }

    const filename = 'goods/' + Date.now() + '_' + fileObj.name;

    client.put(filename, fileObj).then(result => {
      console.log("上传成功：", result);
      // 设置预览图
      document.getElementById("myimg").src = result.url;
      document.getElementById("myimg").style.display = "block";
    }).catch(err => {
      console.error("上传失败：", err);
      alert("图片上传失败！");
    });
  }

  // 提交商品
  function addGood () {
    const title = $("#inputTitle").val();
    const price = $("#inputPrice").val();
    const descr = $("#inputDescr").val();
    const img = $("#myimg").attr("src");

    if (!title || !price || !descr || !img || !img.includes("oss-")) {
      alert("请填写完整信息并上传图片！");
      return;
    }

    $.ajax({
      url: "addGood", // 后台 Servlet 映射路径
      type: "POST",
      data: {
        title: title,
        price: price,
        descr: descr,
        img: img,
        mid: 1
      },
      success: function (res) {
        alert("添加成功：" + res);
      },
      error: function () {
        alert("添加失败！");
      }
    });
  }
</script>
</body>
</html>
